<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="nTip.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.nTip.js"></script>
    <title></title>
</head>
<body>
    <div id="tipDemo">
        <h2><a class="demo1" href="#" text="mydemo1">demo1</a></h2>
        <h2><a class="demo2" href="#" text="mydemo2">demo2</a></h2>
        <h2><a class="demo3" href="#" text="mydemo3">demo3</a></h2>
        <h2><a class="demo4" href="#" text="mydemo4">demo4</a></h2>

    </div>
</body>
<script type="text/javascript">
$(function(){
    $(".demo1").nTip({
        pointyPosition:20
    });
    $(".demo2").nTip({
        tipColor:"#000000",
        showEvent:"mouseover",
        vertical:true
    });
    $(".demo3").nTip({
        showEvent:"click"
    });
    $(".demo4").nTip({
        showEvent:"click",
        vertical:true
    })

})
</script>
</html>